學習完 Vue 之後,想要透過單元測試守護你的專案,但又不知道從何起手?
別擔心,快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試!》
讓你的 Vue 專案更上一層樓!
在上一集,我們已經建立好基本的環境並使用樣板語法將資料內容顯示出來,接下來我們將學習更進階一點方法來顯示資料內容。
在 Vue.js 中有提供一些帶有前綴v-
的指令,指令主要放在 HTML 標籤當中,如同 HTML 屬性一樣,而我們可以透過指令去命令那些元素做事情,只要指令條件符合時,就會執行該指令的動作。而透過這些指令與上一回的樣板語法,我們可以直接在 HTML 上去綁定我們需要做的事情,以下列出幾個常用到的指令與用法:
透過v-if
指令,當v-if
後的條件為true
時,該元素就會顯示在 DOM 上,若false
則該元素不會顯示在 DOM 的結構上。
範例:
<div id='app'>
<div v-if='text1'>最後這段文字會顯示</div>
<div v-if='text2'>最後這段文字不會顯示</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
text1:true,
text2:false
}
})
</script>
和上面的v-if
很像,但v-show
在false
時的消失,實際觀察 DOM 會發現該元素只是被加上了行內樣式 style="display:none"
而已,並沒有從DOM上消失。
接下來介紹的這個指令非常的好用,透過v-for
,我們可以將data
中的某筆資料遍歷輸出,用法就有如原生 JavaScript 中的 for...of
迴圈一樣,取一個變數名稱去拿到資料物件裡面的值,可以用來快速製作一個樣板。
範例:
<div id='app'>
<ul>
<li v-for="(person,index) in class001" :key="person.id">
第{{ index }}筆資料,姓名:{{ person.name }},年齡:{{ person.age }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
class001:[
{
id:'001',
name:'小明',
age:12
},
{
id:'002',
name:'小美',
age:10
},
{
id:'003',
name:'小華',
age:11
},
]
}
})
</script>
需要注意的地方,在使用v-for
指令輸出時,官網強烈建議需要給予一個 key
來作為可識別的資料,有點類似於身分證的概念;而當我們需要對資料操作時,Vue.js 也才能依靠身分證去找到對的人,如果我們是使用門牌(如index
)來檢驗的話,哪天裡面的租客搬走換人了就會找錯人了!
另外一個須注意的地方是,需要避免v-for
與v-if
在同一個地方上使用,因為有可能會渲染到本來應該會隱藏的欄位,而官方也做了詳細解釋,簡單來說你叫貓咪要趴下,又要他站起來,那牠到底是要趴下還是站起來呢?
橘橘:我選擇趴下好了
透過v-model
指令綁定在元素上,可以創造一個雙向綁定資料的概念,例如我們讓資料雙向綁定在一個input
元素上,input
的值就會顯示出他對應的'我會顯示在input中'
,如果我們更改input
的值,最後 data
裡面的值也會被我們更改。
範例:
<div id='app'>
<input type="text" v-model="message">
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
message:'我會顯示在input中'
}
})
</script>
v-on
指令使用方法類似於使用 HTML 原生屬性on
一樣。例如要使用點擊觸發的行為,我們只要在元素上寫上v-on:click="yourFunction"
即可,而寫函式的位置則是在 Vue.js 實體中的 methods
裡頭。範例如下:
HTML部分
<div id="app">
<button type="button" v-on:click="handleOnClick">Click Me!</button>
</div>
JavaScript部分
let vm = new Vue({
el:'#app',
methods:{
handleOnClick : function(){
alert('Hello Vue!')
}
}
})
除此之外,v-on
也可以縮寫為@
,將上面的範例改寫後會變成:
<div id="app">
<button type="button" @click="handleOnClick">Click Me!</button>
</div>
這樣的效果會跟上方一模一樣。
v-bind
主要可以用來綁定元素中的屬性,並且將屬性的值交由 Vue.js 中的 data
來控管,達到動態控制,使該元素變成是可控制的元素,這個觀念在 React.js 中也常常用到,例如常用到的一個做法就是控制元素的class
屬性。下方範例將示範一個由按鈕去驅動資料讓元素的 class
能動態變化:
CSS部分,這裡簡單定義了box與rotate的樣式
.box{
width:100px;
height:100px;
background-color:lightblue;
}
.rotate{
transform:rotate(45deg);
}
HTML部分,這裡透過v-on
的點擊事件讓isRotate
的值可以反轉布林值,而 v-bind:class
的意思則是當isRotate
為true
該元素加上rotate
的 class
名稱,若false
則不添加。
<div id="app">
<div class="box" v-bind:class="{'rotate':isRotate}"><div>
<button type="button" v-on:click="isRotate = !isRotate"> Rotate the box</button>
</div>
JavaScript部分
let vm = new Vue({
el:'#app',
data:{
isRotate: false,
}
})
如此一來我們便可以使用按鈕來驅動元素樣式。而這個指令也有縮寫的寫法,用法省略v-bind
只留下:
的部分,範例修改上面後的如下:
<div id="app">
<div class="box" :class="{'rotate':isRotate}"><div>
<button type="button" @click="isRotate = !isRotate"> Rotate the box</button>
</div>
以上是一些常用到的指令與用法,關於其他更多深入的用法,可到官網上有更多詳細範例說明可以參考,而明天的章節將會介紹到修飾符的內容,我們將會知道怎麼用簡單的修飾符讓指令的變化更加豐富!我們明天見囉~